<template>
  <!-- 自适应布局，实现隐藏显示操作，以及一些简单的动画 -->
  <div class="container">
    <header class="heade">
      <div class="tit-btn">
        <span class="title">容器布局</span>
        <button class="btn" @click="spread">{{ btnTitle }}</button>
      </div>
      <div class="change">
        <button class="add">新增</button>
        <button class="del">修改</button>
      </div>
    </header>
    <div class="con">
      <!-- 左侧 -->
      <div class="left" :style="{ 'width': leftWidth }" />
      <!-- 中间 -->
      <div class="main">
        <div class="floatBtn" @click="showFooter" />
      </div>
      <!-- 右侧 -->
      <div class="right" />
    </div>
    <footer class="foot" :style="{ 'height': footHeight }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      btnTitle: '收起',
      footShow: true,
      leftWidth: '220px',
      footHeight: '120px'
    }
  },
  methods: {
    spread() {
      this.flag = !this.flag
      this.btnTitle = this.flag ? '收起' : '展开'
      this.flag ? (this.leftWidth = '220px') : (this.leftWidth = '0')
    },
    showFooter() {
      this.footShow = !this.footShow
      this.footShow ? (this.footHeight = '120px') : (this.footHeight = '0')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .heade {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    background-color: yellow;
    .tit-btn {
      display: flex;
      .title {
        display: flex;
        align-items: center;
        margin: 0 15px;
        font-size: 30px;
      }
      .btn {
        display: flex;
        width: auto;
        height: 30px;
        align-items: center;
        justify-content: center;
        margin: auto;
      }
    }
    .change {
      margin: auto 20px;
      .add {
        margin-right: 5px;
        width: 75px;
        height: 30px;
      }
      .del {
        width: 75px;
        height: 30px;
      }
    }
  }
  .con {
    display: flex;
    flex: 1;
    .left {
      width: 220px;
      background-color: red;
      transition: all 0.3s ease 0s;
    }
    .main {
      position: relative;
      flex: 1;
      background-color: blue;
      .floatBtn {
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: #aaa;
        border-radius: 50%;
        box-shadow: 0 0 10px #dddddd;
        bottom: 25px;
        right: 0;
        opacity: 0.6;
      }
      .floatBtn:hover {
        cursor: pointer;
      }
    }
    .right {
      width: 220px;
      background-color: green;
    }
  }

  .foot {
    width: 100%;
    height: 120px;
    background-color: #aaa;
    transition: all 0.3s ease 0s;
  }
}
</style>
